<template>
    <div id="add-camera-equipment">
        <el-dialog
            title="添加摄像头设备"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="120px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="设备名称" prop="v_Name">
                            <el-input v-model="ruleForm.v_Name" placeholder="设备名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="品牌名称" prop="v_BrandName">
                            <el-input v-model="ruleForm.v_BrandName" placeholder="品牌名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="监控区域" prop="v_Region">
                            <el-input v-model="ruleForm.v_Region" placeholder="监控区域" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="设备接入协议" prop="n_AccessProtocol">
                            <el-select 
                                disabled
                                v-model="ruleForm.n_AccessProtocol" 
                                filterable 
                                class="m-2" 
                                value-key="id"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in n_AccessProtocolOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="设备类型" prop="n_Type">
                            <el-select 
                                disabled
                                v-model="ruleForm.n_Type" 
                                filterable 
                                class="m-2" 
                                value-key="id"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in n_TypeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="设备流传输协议" prop="n_TransportProtocol">
                            <el-select 
                                disabled
                                v-model="ruleForm.n_TransportProtocol" 
                                filterable 
                                class="m-2" 
                                value-key="id"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in n_TransportProtocolOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="所属机构" prop="v_OrganizationId">
                            <el-select 
                                v-model="ruleForm.v_OrganizationId" 
                                filterable 
                                class="m-2" 
                                value-key="id"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in v_OrganizationOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="服务节点" prop="v_ClusterId">
                            <el-select 
                                v-model="ruleForm.v_ClusterId" 
                                filterable 
                                class="m-2" 
                                value-key="value"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in v_ClusterOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="设备密码" prop="v_Password">
                            <el-input v-model="ruleForm.v_Password" placeholder="设备密码" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="序号" prop="n_Sort">
                            <el-input type="number" v-model="ruleForm.n_Sort" placeholder="序号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="ruleForm.v_Remark" placeholder="备注" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" :disabled="repeatDis" @click="submitForm(ruleFormRef)">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, computed, toRefs, toRaw } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDialog, ElForm, ElFormItem, ElInput, ElOption, ElRow, ElSelect } from 'element-plus'
import { CameraAdd } from '/@/api/its/camera'
import { useDropdownData } from '../hooks/index'
import { AddRuleFormType } from '../types/cameraType'
import { FormType } from '/@/types/its/ItsType'

export default defineComponent( {
    name: 'add-camera-equipment',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
    },
    setup(props,ctx){
        const ruleFormRef = ref()

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive <FormType<AddRuleFormType>> ({
            repeatDis: false,
            ruleForm: {
                v_Name: '',
                v_BrandName: '',
                v_Region: '',
                n_AccessProtocol: 2,
                n_Type: 1,
                n_TransportProtocol: 1,
                v_OrganizationId: '',
                v_ClusterId: '',
                v_Password: '',
                n_Sort: 1,
                v_Remark: '',
            } as AddRuleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive <FormRules> ({
            /*** 放置验证 */
            // 设备名称
            v_Name: [
				{ required: true, message: '请输入设备名称', trigger: 'blur' },
			],
            // 品牌名称
            v_BrandName: [
				{ required: true, message: '请输入品牌名称', trigger: 'blur' },
			],
            // 监控区域
            v_Region: [
				{ required: true, message: '请输入监控区域', trigger: 'blur' },
			],
            // 设备接入协议
            n_AccessProtocolOption: [
                { required: true, message: '请选择备接入协议', trigger: 'change' },
			],
            // 设备类型
            n_Type: [
				{ required: true, message: '请选择设设备类型', trigger: 'change' },
			],
            // 设备流传输协议
            n_TransportProtocol: [
				{ required: true, message: '请选择设备流传输协议', trigger: 'change' },
			],
            // 所属机构
            v_OrganizationId: [
				{ required: true, message: '请选择所属机构', trigger: 'change' },
			],
            // 服务节点
            v_ClusterId: [
				{ required: true, message: '请选择服务节点', trigger: 'change' },
			],
            // 密码
            v_Password: [
				{ required: true, message: '请输入密码', trigger: 'blur' },
			],
            // 序号
            n_Sort: [
				{ required: true, message: '请输入序号', trigger: 'blur' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ruleFormRef.value.resetFields()
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    state.repeatDis = true
                    let param = toRaw(state.ruleForm)
                    let res: any = null
                    try {
                        res = await CameraAdd(param)
                    }finally {
                        state.repeatDis = false
                    }
                    
                    if(res.success){
                        ctx.emit('close','success')
                        ctx.emit('updateData')
                    }
                }else{
                    console.log('error submit!')
                }
            })
        }

        //智能计算平台组织机构下拉菜单
        const { v_OrganizationOption, v_ClusterOption, n_AccessProtocolOption, n_TypeOption, n_TransportProtocolOption } = useDropdownData()

        return {
            handleClose,
            submitForm,
            ruleFormRef,
            ...toRefs(state),
            rules,
            n_AccessProtocolOption,
            n_TypeOption,
            n_TransportProtocolOption,
            v_OrganizationOption,
            v_ClusterOption
        }
    },
} )
</script>
<style scoped lang="scss">
#add-camera-equipment{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
}
</style>